<template>
  <view class="pages">
    <view class="content">
      <canvas type="webgl" id="webgl" style="width: 100%; height: 100%;" @touchstart="touchStart" @touchmove="touchMove"
              @touchend="touchEnd"></canvas>
    </view>
    <foot-tab :index="2" @switchTab="switchTab"></foot-tab>
  </view>
</template>

<script>
import * as THREE from '@/common/threejs/three.weapp.js'
import {glbModel} from '@/common/test-cases/glbModel.js'

export default {
  onLoad: function () {
    uni.createSelectorQuery()
        .in(this)
        .select('#webgl')
        .node()
        .exec((res) => {
          let canvasId = res[0].node._canvasId
          const canvas = THREE.global.registerCanvas(canvasId, res[0].node)
          glbModel(canvas, THREE)
        })
  },
  methods: {
    touchStart(e) {
      THREE.global.touchEventHandlerFactory('canvas', 'touchstart')(e)
    },
    touchMove(e) {
      THREE.global.touchEventHandlerFactory('canvas', 'touchmove')(e)
    },
    touchEnd(e) {
      THREE.global.touchEventHandlerFactory('canvas', 'touchend')(e)
    }
  }
}
</script>



<style lang="scss">


.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
page{
  background-color: #fff;
}

</style>
